<template>
  <view class="container">
    <view class="doctor-item" v-for="doctor in doctors" :key="doctor.id">
      <image :src="doctor.avatar"></image>
      <view class="doctor-info">
        <view class="doctor-name">{{ doctor.name }}</view>
        <view class="doctor-title">{{ doctor.title }}</view>
        <view class="doctor-intro">{{ doctor.intro }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      doctors: [
        {
          id: 1,
          avatar: "@/static/doctor1.jpg",
          name: "张三",
          title: "主任医师",
          intro: "擅长中医内科疾病的诊治",
        },
        {
          id: 2,
          avatar: "@/static/doctor2.jpg",
          name: "李四",
          title: "副主任医师",
          intro: "专注于中医妇科疾病的治疗",
        },
      ],
    };
  },
  onLoad() {
    // 页面加载时的逻辑
  },
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.doctor-item {
  display: flex;
  margin-bottom: 20px;
}
.doctor-item image {
  width: 80px;
  height: 80px;
  margin-right: 20px;
}
.doctor-info {
  flex: 1;
}
.doctor-name {
  font-weight: bold;
}
.doctor-title {
  color: #666;
}
</style>